<template>
  <div>
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="4">
            <span class="blogName">{{blogName}}</span>
          </el-col>
          <el-col :span="20">
            <el-menu
              :default-active="$route.path.replace"
              class="el-menu-demo"
              mode="horizontal"
              @select="homeSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#545c64"
              router
            >
              <el-menu-item index="/index">首页</el-menu-item>
              <el-menu-item index="/article">文章</el-menu-item>
              <el-menu-item index="/mood">心情</el-menu-item>
              <el-menu-item index="/tool">工具</el-menu-item>
              <el-menu-item index="/about">关于</el-menu-item>
              <div class="menu-item-input">
                <el-menu-item index="3" active-text-color="#fff" style="float: right">
                  <el-input placeholder="请输入内容" v-model="input21"></el-input>
                  <el-button size="small" round type="info">搜索</el-button>
                  <el-button
                    size="small"
                    round
                    type="success"
                    @click="centerDialogVisible = true"
                  >登录</el-button>
                </el-menu-item>
              </div>
            </el-menu>
          </el-col>
        </el-row>
        <div class="line"></div>
      </el-header>
      <el-main class="home_main">
        <br>
        <br>
        <router-view></router-view>
        <el-dialog title="登录" :visible.sync="centerDialogVisible" width="30%" center>
          <div style="width: 100% hight: 100% float: left">
            <span slot="footer" class="dialog-footer">
              <span>用户名:&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <el-input v-model="username" placeholder="用户名" style="width: 80% "></el-input>
              <br>
              <br>
              <br>
              <span>密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <el-input v-model="passwd" placeholder="密码" style="width: 80% "></el-input>
              <br>
              <br>
              <br>
              <br>
            </span>
          </div>
          <div style="text-align: center">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <el-button type="primary" @click="login()">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //自定义的值
      blogName:this.mate.blogName,
      // activeIndex: '1',
      input21: "", //搜索框的值
      page: "index",
      centerDialogVisible: false,
      username: "", //用户名
      passwd: "", //密码
      messageType: "", //这是消息的类型
      messageValue: "" //这是消息的值
    };
  },
  methods: {
    // 消息弹窗
    message() {
      this.$message({
        showClose: true,
        message: this.messageValue,
        type: this.messageType
      });
    },
    homeSelect(key, keyPath) {
      this.changePage("index");
      // console.log(key, keyPath);
    },
    changePage(page) {
      this.page = page;
    },
    login() {
      this.$axios
        .get("/account/login", {
          params: {
            username: this.username,
            password: this.passwd
          }
        })
        .then(successResponse => {
          if (successResponse.data == "") {
            this.messageType = "error";
            this.messageValue = "用户名或密码错误";
          } else {
            this.messageType = "success";
            this.messageValue = "登录成功";
            this.centerDialogVisible = false;
            let data = JSON.stringify(this.username);
            this.$router.push({
              path: "/console",
              query: { data: data }
            });
          }
          this.message();
        })
        .catch(failResponse => {}); //失败后的操作
    },
    testclick(data) {
      console.log(data);
    }
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-image: url(../../assets/images/back.png);
  /* background-color: #e0eeee; */
  color: #333;
  text-align: center;
}

/* 下面是搜索框 */
.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #333;
}

.menu-item-input {
  float: right;
  margin-right: 10%;
}

.blogName{
  /* float: right; */
  font-family: "PingFang SC","Hiragino Sans GB";
  font-size:30px;
}
</style>
